<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>软件开发明细 - 在线评测系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f5f7fa;
            color: #333;
        }

        /* 主要内容样式 */
        .main-content {
            padding: 20px;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }

        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e8e8e8;
        }

        .page-title {
            font-size: 20px;
            font-weight: 500;
            color: #333;
        }

        .btn-group {
            display: flex;
            gap: 10px;
        }

        .btn {
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            border: none;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .btn-primary {
            background-color: #1890ff;
            color: #fff;
        }

        .btn-primary:hover {
            background-color: #40a9ff;
        }

        .btn-default {
            background-color: #f5f5f5;
            color: #333;
            border: 1px solid #d9d9d9;
        }

        .btn-default:hover {
            background-color: #e8e8e8;
        }

        /* 步骤导航 */
        .steps-container {
            display: flex;
            margin: 30px 0;
            position: relative;
        }

        .steps-container::before {
            content: '';
            position: absolute;
            top: 16px;
            left: 0;
            right: 0;
            height: 2px;
            background-color: #e8e8e8;
            z-index: 1;
        }

        .step {
            flex: 1;
            text-align: center;
            position: relative;
            z-index: 2;
        }

        .step-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #f5f5f5;
            border: 2px solid #e8e8e8;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto 10px;
            font-weight: bold;
            color: #999;
        }

        .step.active .step-icon {
            background-color: #1890ff;
            border-color: #1890ff;
            color: #fff;
        }

        .step.completed .step-icon {
            background-color: #52c41a;
            border-color: #52c41a;
            color: #fff;
        }

        .step-title {
            font-size: 14px;
            color: #999;
            margin-top: 5px;
        }

        .step.active .step-title {
            color: #1890ff;
            font-weight: 500;
        }

        .step.completed .step-title {
            color: #52c41a;
        }

        /* 表单样式 */
        .form-container {
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            padding: 25px;
            margin-bottom: 20px;
        }

        .form-header {
            padding-bottom: 15px;
            margin-bottom: 20px;
            border-bottom: 1px solid #e8e8e8;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .form-title {
            font-size: 18px;
            font-weight: 500;
            color: #333;
        }

        .form-actions {
            display: flex;
            justify-content: center;
            margin-top: 30px;
            gap: 15px;
        }

        .form-actions .btn {
            min-width: 100px;
        }

        /* 软件开发明细表格样式 */
        .dev-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        
        .dev-table th, 
        .dev-table td {
            border: 1px solid #e8e8e8;
            padding: 8px 15px;
            text-align: center;
        }
        
        .dev-table th {
            background-color: #f9f9f9;
            font-weight: 500;
            color: #333;
            white-space: nowrap;
        }
        
        .amount-cell {
            text-align: right;
        }
        
        .dev-input {
            width: 100%;
            padding: 5px 8px;
            border: none;
            border-radius: 0;
            background-color: #fff;
            box-shadow: none;
            font-family: inherit;
            outline: none;
        }
        
        /* 提示文字样式 */
        .dev-input::placeholder {
            font-style: italic;
            color: #999;
        }
        
        .dev-input:focus {
            box-shadow: none;
        }
        
        .dev-input.text-right {
            text-align: right;
            background-color: #fff;
        }
        
        .add-row-btn {
            margin: 10px 0;
            background-color: #f5f5f5;
            border: 1px dashed #d9d9d9;
            padding: 8px 0;
            width: 100%;
            text-align: center;
            cursor: pointer;
            color: #1890ff;
        }
        
        .add-row-btn:hover {
            background-color: #e6f7ff;
        }
        
        .not-applicable-checkbox {
            margin-top: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: #333;
        }
        
        .category-header {
            background-color: #e6f7ff;
            font-weight: bold;
        }
        
        .system-row {
            background-color: #e6f7ff;
            font-weight: bold;
            font-size: 16px;
            border-top: none;
            border-left: none;
        }
        
        .subsystem-row {
            background-color: #f0f7fa;
            font-weight: 500;
            font-size: 14px;
            border-top: none;
            border-left: none;
        }
        
        .module-row {
            font-size: 13px;
            border-bottom: none;
            background-color: #ffffff;
            border-left: none;
        }
        
        .add-system-btn {
            margin: 5px 0;
            background-color: #e6f7ff;
            border: 1px dashed #91caff;
            padding: 8px 0;
            width: 100%;
            text-align: center;
            cursor: pointer;
            color: #1890ff;
            transition: all 0.3s;
            font-size: 14px;
            font-weight: bold;
        }
        
        .add-subsystem-btn {
            margin: 5px 0;
            background-color: #f0f8ff;
            border: 1px dashed #a9d6ff;
            padding: 8px 0;
            width: 100%;
            text-align: center;
            cursor: pointer;
            color: #1890ff;
            transition: all 0.3s;
            font-size: 14px;
            padding-left: 20px;
        }
        
        .add-module-btn {
            margin: 5px 0;
            background-color: #f5f5f5;
            border: 1px dashed #d9d9d9;
            padding: 8px 0;
            width: 100%;
            text-align: center;
            cursor: pointer;
            color: #1890ff;
            transition: all 0.3s;
            font-size: 14px;
            padding-left: 40px;
        }
        
        .add-system-btn:hover, .add-subsystem-btn:hover, .add-module-btn:hover {
            background-color: #e6f7ff;
            border-color: #1890ff;
        }
        
        /* 操作按钮样式 */
        .btn-add-subsystem, .btn-add-module, .btn-delete {
            margin: 0 3px;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 20px;
            font-weight: bold;
            line-height: 1;
            padding: 0 6px;
            vertical-align: middle;
        }
        
        .btn-add-subsystem, .btn-add-module {
            color: #1890ff;
        }
        
        .btn-delete {
            color: #ff4d4f;
        }
        
        .btn-add-subsystem:hover, .btn-add-module:hover {
            color: #666;
            background-color: transparent;
        }
        
        .btn-delete:hover {
            color: #666;
            background-color: transparent;
        }
        
        .operation-cell {
            white-space: nowrap;
            text-align: center;
        }
        
        /* 添加系统按钮 */
        .btn-system-add {
            background-color: #1890ff;
            color: #fff;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 15px auto;
            transition: all 0.3s;
        }
        
        .btn-system-add:hover {
            background-color: #e8e8e8;
            box-shadow: none;
        }
        
        .btn-system-add i {
            margin-right: 5px;
        }
        
        /* 序号列样式 */
        .seq-number {
            writing-mode: horizontal-tb;
            text-align: center;
            white-space: nowrap;
            width: 100%;
            display: block;
            color: #333; /* 统一改为黑色 */
        }
        
        .system-row .seq-number {
            font-weight: bold;
            font-size: 16px;
        }
        
        .subsystem-row .seq-number {
            font-weight: 500;
            font-size: 14px;
            padding-left: 15px;
        }
        
        .module-row .seq-number {
            font-weight: normal;
            font-size: 13px;
            padding-left: 30px;
        }
        
        /* 输入框样式 */
        .system-row .dev-input {
            font-weight: bold;
            font-size: 16px;
            /* border is inherited from .dev-input */
            background-color: #fff;
        }
        
        .subsystem-row .dev-input {
            font-weight: 500;
            font-size: 14px;
            /* border is inherited from .dev-input */
            background-color: #fff;
        }
        
        .module-row .dev-input {
            font-weight: normal;
            font-size: 13px;
            /* border is inherited from .dev-input */
            background-color: #fff;
        }
        
        /* 缩进样式 */
        .subsystem-row td:nth-child(2) {
            padding-left: 15px;
        }
        
        .module-row td:nth-child(2) {
            padding-left: 30px;
        }
        
        .module-desc {
            text-align: left;
            padding: 15px;
            margin-top: 15px;
            background-color: #f9f9f9;
            border-radius: 4px;
            margin-bottom: 20px;
            color: #333;
        }
        
        /* 系统小计行样式 */
        tr[data-system-total="true"] {
            background-color: #e6f7ff;
            border-bottom: none;
        }
        
        tr[data-system-total="true"] td {
            color: #1890ff;
            font-weight: bold;
        }
        
        /* 总计行样式 */
        tfoot tr {
            background-color: #f0f5ff;
            border-top: 1px solid #1890ff;
            border-bottom: none;
        }
        
        tfoot td {
            color: #1890ff;
            font-weight: bold;
        }
        
        /* 模态框样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none; /* 默认隐藏 */
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        .modal-content {
            background-color: #fff;
            padding: 25px;
            border-radius: 8px;
            width: 90%;
            max-width: 1000px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        
        /* 修复预览表格表头样式 */
        #previewModal th {
            white-space: normal !important;
            height: 60px !important;
            vertical-align: middle !important;
            font-size: 14px !important;
            padding: 5px !important;
            line-height: 1.4 !important;
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #e8e8e8;
            padding-bottom: 15px;
            margin-bottom: 20px;
        }
        
        .modal-header h2 {
            font-size: 18px;
            font-weight: 500;
        }
        
        .modal-close-btn {
            background: none;
            border: none;
            font-size: 28px;
            cursor: pointer;
            color: #888;
            line-height: 1;
        }
        
        .preview-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        .preview-table th, .preview-table td {
            border: 1px solid #e8e8e8;
            padding: 10px 12px;
            text-align: left;
        }
        
        .preview-table th {
            background-color: #f9f9f9;
            font-weight: 500;
            text-align: center;
            white-space: normal;
            height: 60px;
            vertical-align: middle;
        }
        
        .preview-table .amount-preview-cell {
            text-align: right;
        }
        
        /* 隐藏数字输入框的上下箭头 */
        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        input[type=number] {
            -moz-appearance: textfield;
        }
    </style>
</head>
<body>
    <div class="main-content">
        <!-- 步骤导航 -->
        <div class="steps-container">
            <div class="step completed">
                <div class="step-icon">1</div>
                <div class="step-title">基本信息</div>
            </div>
            <div class="step completed">
                <div class="step-icon">2</div>
                <div class="step-title">预算总表</div>
            </div>
            <div class="step completed">
                <div class="step-icon">3</div>
                <div class="step-title">产品购置明细</div>
            </div>
            <div class="step active">
                <div class="step-icon">4</div>
                <div class="step-title">软件开发明细</div>
            </div>
            <div class="step">
                <div class="step-icon">5</div>
                <div class="step-title">实施服务明细</div>
            </div>
            <div class="step">
                <div class="step-icon">6</div>
                <div class="step-title">市级政务云租用</div>
            </div>
        </div>

        <!-- 表单 -->
        <div class="form-container">
            <div class="form-header">
                <h2 class="form-title">应用软件开发明细表</h2>
                <div class="btn-group">
                    <button class="btn btn-default" id="previewBtn">
                        <i class="fas fa-eye"></i> 预览
                    </button>
                    <button class="btn btn-default" id="exportBtn">
                        <i class="fas fa-file-export"></i> 导出
                    </button>
                </div>
            </div>

            <form id="softwareDevForm">
                <div class="module-desc">
                    <p>本表填写应用软件开发内容，包括功能模块、预计工作量、价格等信息。开发工作量根据项目具体情况，可按照功能点法、COCOMO模型等方法计算得出，或直接采用工作量人月数进行估算。</p>
                </div>
                
                <!-- 软件开发明细表格 -->
                <table class="dev-table" id="devTable">
                    <thead>
                        <tr>
                            <th style="width: 5%;">序号</th>
                            <th style="width: 25%;">功能模块名称</th>
                            <th style="width: 30%;">功能描述</th>
                            <th style="width: 10%;">开发语言</th>
                            <th style="width: 10%;">工作量(人月)</th>
                            <th style="width: 15%;">金额(万元)</th>
                            <th style="width: 5%;">操作</th>
                        </tr>
                    </thead>
                    <tbody id="devTableBody">
                        <!-- 系统将由JavaScript动态生成 -->
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="4" style="text-align: right; font-weight: bold; color: #1890ff;">开发费用合计：</td>
                            <td><input type="text" class="dev-input" name="total_workload" readonly></td>
                            <td><input type="text" class="dev-input text-right" name="total_amount" readonly></td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
                
                <button type="button" class="btn-system-add" id="addSystemBtn">
                    <i class="fas fa-plus-circle"></i> 添加系统
                </button>
                
                <div class="module-desc">
                    <h4 style="margin-bottom: 10px;">软件开发单价说明</h4>
                    <p>软件开发人员单价按照市场平均价格确定，不同项目可能有所差异。当前系统推荐的软件开发人月单价为：1.2万元/人月。</p>
                </div>
                


                <div class="form-actions">
                    <button type="button" class="btn btn-default" id="prevBtn">
                        <i class="fas fa-arrow-left"></i> 上一步
                    </button>
                    <button type="button" class="btn btn-default" id="saveBtn">
                        <i class="fas fa-save"></i> 保存
                    </button>
                    <button type="button" class="btn btn-primary" id="nextBtn">
                        下一步 <i class="fas fa-arrow-right"></i>
                    </button>
                    <button type="button" class="btn btn-primary" id="submitBtn" disabled>
                        确认提交审核
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div id="previewModal" class="modal-overlay">
        <div class="modal-content">
            <div class="modal-header">
                <h2>应用软件开发明细表预览</h2>
                <button class="modal-close-btn">&times;</button>
            </div>
            <div class="modal-body">
                <!-- 预览表格将由JavaScript动态插入 -->
            </div>
        </div>
    </div>

    <script>
        // 工作量和金额计算常量
        const WORKLOAD_PRICE = 1.2; // 人月单价，万元/人月
        
        // 系统、子系统、模块的计数器
        let systemCounter = 0;
        let subsystemCounters = {};
        let moduleCounters = {};
            
        // 将数字转换为中文大写数字
        function numberToChinese(num) {
            const chineseNums = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
            if (num <= 10) {
                return chineseNums[num];
            } else if (num < 20) {
                return '十' + (num > 10 ? chineseNums[num - 10] : '');
            } else {
                const tens = Math.floor(num / 10);
                const ones = num % 10;
                return chineseNums[tens] + '十' + (ones > 0 ? chineseNums[ones] : '');
            }
        }
        
        // 初始化事件监听
        document.addEventListener('DOMContentLoaded', function() {
            // 添加一个初始系统
            addSystem();
            
            // 添加系统按钮事件
            document.getElementById('addSystemBtn').addEventListener('click', function() {
                addSystem();
            });
            
            // 删除按钮事件（使用事件委托）
            document.addEventListener('click', function(event) {
                const deleteBtn = event.target.closest('.btn-delete');
                if (deleteBtn) {
                    const row = deleteBtn.closest('tr');
                    const rowType = row.getAttribute('data-type');
                    const systemId = row.getAttribute('data-system-id');
                    const subsystemId = row.getAttribute('data-subsystem-id');
                    
                    if (rowType === 'system') {
                        // 删除整个系统（包括所有子系统和模块）
                        const systemRows = document.querySelectorAll(`tr[data-system-id="${systemId}"]`);
                        systemRows.forEach(row => row.remove());
                    } else if (rowType === 'subsystem') {
                        // 删除子系统（包括所有模块）
                        const subsystemRows = document.querySelectorAll(`tr[data-system-id="${systemId}"][data-subsystem-id="${subsystemId}"]`);
                        subsystemRows.forEach(row => row.remove());
                    } else if (rowType === 'module') {
                        // 只删除单个模块
                        row.remove();
                        
                        // 重新排序模块编号
                        updateModuleNumbers(systemId, subsystemId);
                        
                        // 更新模块计数器
                        const moduleRows = document.querySelectorAll(`tr[data-system-id="${systemId}"][data-subsystem-id="${subsystemId}"][data-type="module"]`);
                        moduleCounters[systemId][subsystemId] = moduleRows.length;
                    }
                    
                    // 重新计算总计
                    calculateTotal();
                }
            });
            
            // 添加子系统按钮事件（使用事件委托）
            document.addEventListener('click', function(event) {
                const addSubsystemBtn = event.target.closest('.btn-add-subsystem');
                if (addSubsystemBtn) {
                    const systemId = addSubsystemBtn.getAttribute('data-system-id');
                    addSubsystem(systemId);
                }
            });
            
            // 添加模块按钮事件（使用事件委托）
            document.addEventListener('click', function(event) {
                const addModuleBtn = event.target.closest('.btn-add-module');
                if (addModuleBtn) {
                    const systemId = addModuleBtn.getAttribute('data-system-id');
                    const subsystemId = addModuleBtn.getAttribute('data-subsystem-id');
                    addModule(systemId, subsystemId);
                }
            });
            
            // 自定义提示框
            function showCustomAlert(message) {
                // 检查是否已存在提示框
                let alertBox = document.getElementById('customAlertBox');
                
                if (!alertBox) {
                    // 创建提示框
                    alertBox = document.createElement('div');
                    alertBox.id = 'customAlertBox';
                    alertBox.style.position = 'fixed';
                    alertBox.style.top = '50%';
                    alertBox.style.left = '50%';
                    alertBox.style.transform = 'translate(-50%, -50%)';
                    alertBox.style.backgroundColor = 'white';
                    alertBox.style.padding = '20px';
                    alertBox.style.borderRadius = '8px';
                    alertBox.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
                    alertBox.style.zIndex = '2000';
                    alertBox.style.minWidth = '300px';
                    alertBox.style.textAlign = 'center';
                    alertBox.style.animation = 'fadeIn 0.3s';
                    
                    // 添加动画样式
                    const style = document.createElement('style');
                    style.textContent = `
                        @keyframes fadeIn {
                            from { opacity: 0; transform: translate(-50%, -60%); }
                            to { opacity: 1; transform: translate(-50%, -50%); }
                        }
                    `;
                    document.head.appendChild(style);
                    
                    // 创建遮罩层
                    const overlay = document.createElement('div');
                    overlay.style.position = 'fixed';
                    overlay.style.top = '0';
                    overlay.style.left = '0';
                    overlay.style.width = '100%';
                    overlay.style.height = '100%';
                    overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
                    overlay.style.zIndex = '1999';
                    document.body.appendChild(overlay);
                    
                    // 不添加标题，直接显示消息
                    
                    // 创建消息容器
                    const messageDiv = document.createElement('div');
                    messageDiv.textContent = message;
                    messageDiv.style.margin = '15px 0';
                    messageDiv.style.fontSize = '16px';
                    messageDiv.style.color = '#333';
                    alertBox.appendChild(messageDiv);
                    
                    // 创建确定按钮
                    const confirmBtn = document.createElement('button');
                    confirmBtn.textContent = '确定';
                    confirmBtn.style.backgroundColor = '#4e7bef';
                    confirmBtn.style.color = 'white';
                    confirmBtn.style.border = 'none';
                    confirmBtn.style.padding = '8px 40px';
                    confirmBtn.style.borderRadius = '4px';
                    confirmBtn.style.fontSize = '14px';
                    confirmBtn.style.cursor = 'pointer';
                    confirmBtn.style.transition = 'background-color 0.3s';
                    
                    confirmBtn.onmouseover = function() {
                        this.style.backgroundColor = '#3d6ae8';
                    };
                    
                    confirmBtn.onmouseout = function() {
                        this.style.backgroundColor = '#4e7bef';
                    };
                    
                    confirmBtn.onclick = function() {
                        document.body.removeChild(alertBox);
                        document.body.removeChild(overlay);
                    };
                    
                    alertBox.appendChild(confirmBtn);
                    document.body.appendChild(alertBox);
                } else {
                    // 更新已存在提示框的消息
                    alertBox.querySelector('div:nth-child(1)').textContent = message;
                }
            }
            
            // 验证数量是否为正整数
            function validateQuantity(input) {
                const value = input.value;
                // 检查是否为正整数
                if (value !== '' && (!/^\d+$/.test(value) || parseInt(value) <= 0)) {
                    showCustomAlert('数量必须是正整数！');
                    input.value = ''; // 清空无效输入
                    return false;
                }
                return true;
            }
            
            // 工作量输入事件（使用事件委托）
            document.addEventListener('input', function(event) {
                if (event.target.matches('input[name$="_workload"]')) {
                    // 验证数量是否为正整数
                    if (!validateQuantity(event.target)) {
                        const row = event.target.closest('tr');
                        const amountInput = row.querySelector('input[name$="_amount"]');
                        if (amountInput) {
                            amountInput.value = "0.00";
                        }
                        calculateTotal();
                        return;
                    }
                    
                    const workload = parseInt(event.target.value || 0);
                    const row = event.target.closest('tr');
                    const amountInput = row.querySelector('input[name$="_amount"]');
                    
                    if (amountInput) {
                        const amount = workload * WORKLOAD_PRICE;
                        amountInput.value = amount.toFixed(2);
                    }
                    
                    // 重新计算总计
                    calculateTotal();
                            }
                        });
                        
            // 金额输入事件（使用事件委托）
            document.addEventListener('input', function(event) {
                if (event.target.matches('input[name$="_amount"]')) {
                    // 重新计算总计
                    calculateTotal();
                            }
                        });
            
            // "该表不适用于本项目"复选框事件
            const notApplicableCheckbox = document.getElementById('notApplicable');
            if (notApplicableCheckbox) {
                notApplicableCheckbox.addEventListener('change', function() {
                const inputs = document.querySelectorAll('.dev-input:not([readonly])');
                const deleteButtons = document.querySelectorAll('.btn-delete');
                const addButtons = document.querySelectorAll('.add-system-btn, .add-subsystem-btn, .add-module-btn, #addSystemBtn');
                
                if (this.checked) {
                    inputs.forEach(input => {
                        input.disabled = true;
                        input.style.backgroundColor = '#f5f5f5';
                    });
                    deleteButtons.forEach(btn => btn.disabled = true);
                    addButtons.forEach(btn => btn.disabled = true);
                } else {
                    inputs.forEach(input => {
                        input.disabled = false;
                        input.style.backgroundColor = '';
                });
                    deleteButtons.forEach(btn => btn.disabled = false);
                    addButtons.forEach(btn => btn.disabled = false);
                }
            });
            }
            
            // 检查提交按钮状态
            function checkSubmitButtonStatus() {
                // 从localStorage获取所有页面的完成状态
                const basicInfoCompleted = localStorage.getItem('basicInfoCompleted') === 'true';
                const budgetCompleted = localStorage.getItem('budgetCompleted') === 'true';
                const productCompleted = localStorage.getItem('productCompleted') === 'true';
                const softwareCompleted = localStorage.getItem('softwareCompleted') === 'true';
                const implementationCompleted = localStorage.getItem('implementationCompleted') === 'true';
                const cloudCompleted = localStorage.getItem('cloudCompleted') === 'true';
                
                // 只有当所有页面都完成时，才启用提交按钮
                const allCompleted = basicInfoCompleted && budgetCompleted && productCompleted && 
                                    softwareCompleted && implementationCompleted && cloudCompleted;
                
                document.getElementById('submitBtn').disabled = !allCompleted;
                
                if (allCompleted) {
                    document.getElementById('submitBtn').style.opacity = '1';
                } else {
                    document.getElementById('submitBtn').style.opacity = '0.6';
                }
            }
            
            // 页面加载时检查提交按钮状态
            checkSubmitButtonStatus();
            
            // 保存按钮事件
            document.getElementById('saveBtn').addEventListener('click', function() {
                // 标记当前页面已完成
                localStorage.setItem('softwareCompleted', 'true');
                
                // 检查提交按钮状态
                checkSubmitButtonStatus();
                
                showCustomAlert('软件开发明细已保存');
            });
            
            // 上一步按钮事件
            document.getElementById('prevBtn').addEventListener('click', function() {
                window.location.href = 'product-purchase.html';
            });
            
            // 下一步按钮事件
            document.getElementById('nextBtn').addEventListener('click', function() {
                // 标记当前页面已完成
                localStorage.setItem('softwareCompleted', 'true');
                
                // 检查提交按钮状态
                checkSubmitButtonStatus();
                
                window.location.href = 'implementation-service.html';
            });
            
            // 提交按钮功能
            document.getElementById('submitBtn').addEventListener('click', function() {
                if (!this.disabled) {
                    showCustomConfirm('确认提交项目申报审核吗？提交后将不能再修改。', function(confirmed) {
                        if (confirmed) {
                            showCustomAlert('项目申报已提交审核，请等待审核结果。');
                            setTimeout(function() {
                                window.location.href = '../project-submit.html';
                            }, 1500);
                        }
                    });
                }
            });
            
            // 预览按钮事件
            document.getElementById('previewBtn').addEventListener('click', showPreview);
            
            // 导出按钮事件
            document.getElementById('exportBtn').addEventListener('click', exportToExcel);
            
            // 关闭模态框按钮事件
            document.querySelector('.modal-close-btn').addEventListener('click', function() {
                document.getElementById('previewModal').style.display = 'none';
            });
            
            // 点击模态框背景关闭模态框
            document.getElementById('previewModal').addEventListener('click', function(event) {
                if (event.target === this) {
                    this.style.display = 'none';
                }
            });
        });
        
        // 添加系统
        function addSystem() {
            systemCounter++;
            const systemId = `system_${systemCounter}`;
            subsystemCounters[systemId] = 0;
            moduleCounters[systemId] = {};
            
            const tbody = document.getElementById('devTableBody');
            
            // 创建系统行
            const systemRow = document.createElement('tr');
            systemRow.className = 'system-row';
            systemRow.setAttribute('data-type', 'system');
            systemRow.setAttribute('data-system-id', systemId);
            systemRow.innerHTML = `
                <td><span class="seq-number">系统${numberToChinese(systemCounter)}</span></td>
                <td colspan="5">
                    <input type="text" class="dev-input" name="${systemId}_name" placeholder="系统名称">
                </td>
                <td class="operation-cell">
                    <button type="button" class="btn-add-subsystem" data-system-id="${systemId}" title="添加子系统">+</button>
                    <button type="button" class="btn-delete" title="删除系统">-</button>
                </td>
            `;
            
            // 创建系统小计行
            const systemTotalRow = document.createElement('tr');
            systemTotalRow.setAttribute('data-system-id', systemId);
            systemTotalRow.setAttribute('data-system-total', 'true');
            systemTotalRow.innerHTML = `
                <td colspan="4" style="text-align: right; color: #1890ff;"><strong>系统小计：</strong></td>
                <td><input type="text" class="dev-input" name="${systemId}_workload_total" readonly></td>
                <td><input type="text" class="dev-input text-right" name="${systemId}_amount_total" readonly></td>
                <td></td>
            `;
            
            // 插入行
            tbody.appendChild(systemRow);
            
            // 添加一个初始子系统
            addSubsystem(systemId);
            
            // 添加系统小计行
            tbody.appendChild(systemTotalRow);
        }
        
        // 添加子系统
        function addSubsystem(systemId) {
            subsystemCounters[systemId]++;
            const subsystemId = `${systemId}_subsystem_${subsystemCounters[systemId]}`;
            moduleCounters[systemId][subsystemId] = 0;
            
            const tbody = document.getElementById('devTableBody');
            const systemTotalRow = document.querySelector(`tr[data-system-id="${systemId}"][data-system-total="true"]`);
            
            // 创建子系统行
            const subsystemRow = document.createElement('tr');
            subsystemRow.className = 'subsystem-row';
            subsystemRow.setAttribute('data-type', 'subsystem');
            subsystemRow.setAttribute('data-system-id', systemId);
            subsystemRow.setAttribute('data-subsystem-id', subsystemId);
            subsystemRow.innerHTML = `
                <td><span class="seq-number">子系统${subsystemCounters[systemId]}</span></td>
                <td colspan="5">
                    <input type="text" class="dev-input" name="${subsystemId}_name" placeholder="子系统名称">
                </td>
                <td class="operation-cell">
                    <button type="button" class="btn-add-module" data-system-id="${systemId}" data-subsystem-id="${subsystemId}" title="添加模块">+</button>
                    <button type="button" class="btn-delete" title="删除子系统">-</button>
                </td>
            `;
            
            // 插入行（在系统小计行之前）
            tbody.insertBefore(subsystemRow, systemTotalRow);
            
            // 添加一个初始模块
            addModule(systemId, subsystemId);
        }
        
        // 添加模块
        function addModule(systemId, subsystemId) {
            moduleCounters[systemId][subsystemId]++;
            const moduleId = `${subsystemId}_module_${moduleCounters[systemId][subsystemId]}`;
            
            const tbody = document.getElementById('devTableBody');
            const systemTotalRow = document.querySelector(`tr[data-system-id="${systemId}"][data-system-total="true"]`);
            
            // 创建模块行
            const moduleRow = document.createElement('tr');
            moduleRow.className = 'module-row';
            moduleRow.setAttribute('data-type', 'module');
            moduleRow.setAttribute('data-system-id', systemId);
            moduleRow.setAttribute('data-subsystem-id', subsystemId);
            moduleRow.setAttribute('data-module-id', moduleId);
            moduleRow.setAttribute('data-module-number', moduleCounters[systemId][subsystemId]);
            moduleRow.innerHTML = `
                <td><span class="seq-number">模块(${moduleCounters[systemId][subsystemId]})</span></td>
                <td><input type="text" class="dev-input" name="${moduleId}_name" placeholder="模块名称"></td>
                <td><textarea class="dev-input" name="${moduleId}_desc" rows="3" placeholder="功能描述"></textarea></td>
                <td><input type="text" class="dev-input" name="${moduleId}_lang" placeholder="开发语言"></td>
                <td><input type="number" class="dev-input" name="${moduleId}_workload" step="0.1" min="0"></td>
                <td><input type="number" class="dev-input text-right" name="${moduleId}_amount" step="0.01" min="0"></td>
                <td class="operation-cell"><button type="button" class="btn-delete" title="删除模块">-</button></td>
            `;
            
            // 获取该子系统行
            const subsystemRow = document.querySelector(`tr[data-system-id="${systemId}"][data-subsystem-id="${subsystemId}"]`);
            
            // 插入行（在子系统行之后）
            if (subsystemRow.nextSibling) {
                tbody.insertBefore(moduleRow, subsystemRow.nextSibling);
            } else {
                tbody.insertBefore(moduleRow, systemTotalRow);
            }
            
            // 重新排序模块编号
            updateModuleNumbers(systemId, subsystemId);
            
            // 重新计算总计
            calculateTotal();
        }
        
        // 更新模块编号
        function updateModuleNumbers(systemId, subsystemId) {
            const moduleRows = document.querySelectorAll(`tr[data-system-id="${systemId}"][data-subsystem-id="${subsystemId}"][data-type="module"]`);
            moduleRows.forEach((row, index) => {
                row.cells[0].innerHTML = `<span class="seq-number">模块(${index + 1})</span>`;
                row.setAttribute('data-module-number', index + 1);
            });
        }
        
        // 计算总计
        function calculateTotal() {
            // 计算每个系统的小计（包括其下所有子系统和模块）
            const systemTotalRows = document.querySelectorAll('tr[data-system-total="true"]');
            
            systemTotalRows.forEach(systemTotalRow => {
                const systemId = systemTotalRow.getAttribute('data-system-id');
                
                // 获取该系统下所有模块的工作量和金额
                const moduleWorkloadInputs = document.querySelectorAll(`tr[data-system-id="${systemId}"][data-type="module"] input[name$="_workload"]`);
                const moduleAmountInputs = document.querySelectorAll(`tr[data-system-id="${systemId}"][data-type="module"] input[name$="_amount"]`);
                
                let workloadTotal = 0;
                let amountTotal = 0;
                
                moduleWorkloadInputs.forEach(input => {
                    workloadTotal += parseFloat(input.value || 0);
                });
                
                moduleAmountInputs.forEach(input => {
                    amountTotal += parseFloat(input.value || 0);
                });
                
                const systemWorkloadTotal = systemTotalRow.querySelector(`input[name="${systemId}_workload_total"]`);
                const systemAmountTotal = systemTotalRow.querySelector(`input[name="${systemId}_amount_total"]`);
                
                if (systemWorkloadTotal) systemWorkloadTotal.value = workloadTotal.toFixed(1);
                if (systemAmountTotal) systemAmountTotal.value = amountTotal.toFixed(2);
            });
            
            // 计算总计（所有系统的小计之和）
            const systemWorkloadTotals = document.querySelectorAll('input[name$="_workload_total"]');
            const systemAmountTotals = document.querySelectorAll('input[name$="_amount_total"]');
            
            let totalWorkload = 0;
            let totalAmount = 0;
            
            systemWorkloadTotals.forEach(input => {
                totalWorkload += parseFloat(input.value || 0);
            });
            
            systemAmountTotals.forEach(input => {
                totalAmount += parseFloat(input.value || 0);
            });
            
            document.querySelector('input[name="total_workload"]').value = totalWorkload.toFixed(1);
            document.querySelector('input[name="total_amount"]').value = totalAmount.toFixed(2);
        }

        // 显示预览
        function showPreview() {
            const modalBody = document.querySelector('#previewModal .modal-body');
            let tableHTML = `<table class="preview-table">
                <thead>
                    <tr>
                        <th style="width: 5%; height: 60px;">序<br/>号</th>
                        <th style="width: 25%;">功能模块名称</th>
                        <th style="width: 30%;">功能描述</th>
                        <th style="width: 10%;">开发<br/>语言</th>
                        <th style="width: 10%;">工作量<br/>(人月)</th>
                        <th style="width: 15%;">金额<br/>(万元)</th>
                    </tr>
                </thead>
                <tbody>`;
            
            // 遍历所有系统
            const systemRows = document.querySelectorAll('tr[data-type="system"]');
            
            systemRows.forEach(systemRow => {
                const systemId = systemRow.getAttribute('data-system-id');
                const systemName = systemRow.querySelector(`input[name="${systemId}_name"]`)?.value || '未命名系统';
                
                // 添加系统行
                tableHTML += `<tr class="system-row">
                    <td colspan="6" style="background-color: #e6f7ff; font-weight: bold; color: #1890ff;">${systemName}</td>
                </tr>`;
                
                // 获取该系统下的所有子系统
                const subsystemRows = document.querySelectorAll(`tr[data-type="subsystem"][data-system-id="${systemId}"]`);
                
                subsystemRows.forEach(subsystemRow => {
                    const subsystemId = subsystemRow.getAttribute('data-subsystem-id');
                    const subsystemName = subsystemRow.querySelector(`input[name="${subsystemId}_name"]`)?.value || '未命名子系统';
                    
                    // 添加子系统行
                    tableHTML += `<tr class="subsystem-row">
                        <td colspan="6" style="background-color: #f0f7fa; font-weight: 500; padding-left: 20px;">${subsystemName}</td>
                    </tr>`;
                    
                    // 获取该子系统下的所有模块
                    const moduleRows = document.querySelectorAll(`tr[data-type="module"][data-system-id="${systemId}"][data-subsystem-id="${subsystemId}"]`);
                    
                    moduleRows.forEach((moduleRow, index) => {
                        const moduleId = moduleRow.getAttribute('data-module-id');
                        const moduleName = moduleRow.querySelector(`input[name="${moduleId}_name"]`)?.value || '';
                        const moduleDesc = moduleRow.querySelector(`textarea[name="${moduleId}_desc"]`)?.value || '';
                        const moduleLang = moduleRow.querySelector(`input[name="${moduleId}_lang"]`)?.value || '';
                        const workload = moduleRow.querySelector(`input[name="${moduleId}_workload"]`)?.value || '0';
                        const amount = moduleRow.querySelector(`input[name="${moduleId}_amount"]`)?.value || '0.00';
                        
                        // 添加模块行到预览
                        tableHTML += `<tr>
                            <td style="text-align: center;">${index + 1}</td>
                            <td style="padding-left: 40px;">${moduleName}</td>
                            <td>${moduleDesc}</td>
                            <td>${moduleLang}</td>
                            <td style="text-align: right;">${workload}</td>
                            <td style="text-align: right;">${amount}</td>
                        </tr>`;
                    });
                });
                
                // 添加系统小计行
                const systemWorkloadTotal = document.querySelector(`input[name="${systemId}_workload_total"]`)?.value || '0';
                const systemAmountTotal = document.querySelector(`input[name="${systemId}_amount_total"]`)?.value || '0.00';
                
                tableHTML += `<tr style="background-color: #e6f7ff;">
                    <td colspan="4" style="text-align: right; font-weight: bold; color: #1890ff;">系统小计：</td>
                    <td style="text-align: right; font-weight: bold;">${systemWorkloadTotal}</td>
                    <td style="text-align: right; font-weight: bold;">${systemAmountTotal}</td>
                </tr>`;
            });
            
            // 添加总计行
            const totalWorkload = document.querySelector('input[name="total_workload"]')?.value || '0';
            const totalAmount = document.querySelector('input[name="total_amount"]')?.value || '0.00';
            
            tableHTML += `<tr style="background-color: #f0f5ff; font-weight: bold;">
                <td colspan="4" style="text-align: right; color: #1890ff;">开发费用合计：</td>
                <td style="text-align: right;">${totalWorkload}</td>
                <td style="text-align: right;">${totalAmount}</td>
            </tr>`;
            
            tableHTML += `</tbody></table>`;
            modalBody.innerHTML = tableHTML;
            document.getElementById('previewModal').style.display = 'flex';
        }
        
        // 导出到Excel
        function exportToExcel() {
            // 创建数据数组
            const data = [];
            // 添加表头
            data.push([
                '序号', '功能模块名称', '功能描述', '开发语言', '工作量(人月)', '金额(万元)'
            ]);
            
            // 遍历所有系统
            const systemRows = document.querySelectorAll('tr[data-type="system"]');
            
            systemRows.forEach(systemRow => {
                const systemId = systemRow.getAttribute('data-system-id');
                const systemName = systemRow.querySelector(`input[name="${systemId}_name"]`)?.value || '未命名系统';
                
                // 添加系统行
                data.push([systemName, '', '', '', '', '']);
                
                // 获取该系统下的所有子系统
                const subsystemRows = document.querySelectorAll(`tr[data-type="subsystem"][data-system-id="${systemId}"]`);
                
                subsystemRows.forEach(subsystemRow => {
                    const subsystemId = subsystemRow.getAttribute('data-subsystem-id');
                    const subsystemName = subsystemRow.querySelector(`input[name="${subsystemId}_name"]`)?.value || '未命名子系统';
                    
                    // 添加子系统行
                    data.push(['', subsystemName, '', '', '', '']);
                    
                    // 获取该子系统下的所有模块
                    const moduleRows = document.querySelectorAll(`tr[data-type="module"][data-system-id="${systemId}"][data-subsystem-id="${subsystemId}"]`);
                    
                    moduleRows.forEach((moduleRow, index) => {
                        const moduleId = moduleRow.getAttribute('data-module-id');
                        const moduleName = moduleRow.querySelector(`input[name="${moduleId}_name"]`)?.value || '';
                        const moduleDesc = moduleRow.querySelector(`textarea[name="${moduleId}_desc"]`)?.value || '';
                        const moduleLang = moduleRow.querySelector(`input[name="${moduleId}_lang"]`)?.value || '';
                        const workload = parseFloat(moduleRow.querySelector(`input[name="${moduleId}_workload"]`)?.value || '0');
                        const amount = parseFloat(moduleRow.querySelector(`input[name="${moduleId}_amount"]`)?.value || '0');
                        
                        // 添加模块行到数据
                        data.push([
                            index + 1, moduleName, moduleDesc, moduleLang, workload, amount
                        ]);
                    });
                });
                
                // 添加系统小计行
                const systemWorkloadTotal = parseFloat(document.querySelector(`input[name="${systemId}_workload_total"]`)?.value || '0');
                const systemAmountTotal = parseFloat(document.querySelector(`input[name="${systemId}_amount_total"]`)?.value || '0');
                
                data.push(['', '', '', '系统小计:', systemWorkloadTotal, systemAmountTotal]);
                
                // 添加空行
                data.push(['', '', '', '', '', '']);
            });
            
            // 添加总计行
            const totalWorkload = parseFloat(document.querySelector('input[name="total_workload"]')?.value || '0');
            const totalAmount = parseFloat(document.querySelector('input[name="total_amount"]')?.value || '0');
            
            data.push(['', '', '', '开发费用合计:', totalWorkload, totalAmount]);
            
            // 创建工作表
            const worksheet = XLSX.utils.aoa_to_sheet(data);
            
            // 设置列宽
            worksheet['!cols'] = [
                { wch: 5 }, { wch: 25 }, { wch: 40 }, { wch: 15 }, 
                { wch: 12 }, { wch: 12 }
            ];
            
            // 设置数字格式
            for (let i = 1; i < data.length; i++) {
                const workloadCell = 'E' + (i + 1);
                const amountCell = 'F' + (i + 1);
                
                if (worksheet[workloadCell] && worksheet[workloadCell].t === 'n') {
                    worksheet[workloadCell].z = '#,##0.0';
                }
                
                if (worksheet[amountCell] && worksheet[amountCell].t === 'n') {
                    worksheet[amountCell].z = '#,##0.00';
                }
            }
            
            // 创建工作簿并添加工作表
            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, '软件开发明细');
            
            // 下载Excel文件
            XLSX.writeFile(workbook, '软件开发明细.xlsx');
        }
    </script>
</body>
</html> 